<template>
  <t-dialog
    :header="header"
    placement="center"
    :visible.sync="visible"
    @confirm="onSubmit"
    :onClose="closeDialog"
    :closeOnOverlayClick="false"
    width="60%"
  >
    <t-form
      labelAlign="right"
      labelWidth="230px"
      :data="formData"
      ref="form"
      @submit="onSubmit"
      :colon="true"
      :rules="rules"
    >
      <t-form-item label="一、交通运输从业人员数量" name="jtyscy">
        <t-input-number v-model="formData.jtyscy" theme="column" style="width: 100%" placeholder="请输入交通运输从业人员数量"></t-input-number>
        <!-- <t-input v-model="formData.jtyscy" placeholder="请输入交通运输从业人员数量"></t-input> -->
      </t-form-item>
      <t-form-item label="其中：学士及以上学位" name="jtyscyssys">
        <t-input-number v-model="formData.jtyscyssys" theme="column" style="width: 100%" placeholder="请输入学士及以上学位数量"></t-input-number>
        <!-- <t-input v-model="formData.jtyscyssys" placeholder="请输入学士及以上学位数量"></t-input> -->
      </t-form-item>
      <t-form-item label="二、交通运输科技活动人员数量" name="jtyskjhd">
        <t-input-number v-model="formData.jtyskjhd" theme="column" style="width: 100%" placeholder="请输入交通运输科技活动人员数量"></t-input-number>
        <!-- <t-input v-model="formData.jtyskjhd" placeholder="请输入交通运输科技活动人员数量"></t-input> -->
      </t-form-item>
      <t-form-item label="其中：博士学位" name="jtyskjhdbs">
        <t-input-number v-model="formData.jtyskjhdbs" theme="column" style="width: 100%" placeholder="请输入博士学位数量"></t-input-number>
        <!-- <t-input v-model="formData.jtyskjhdbs" placeholder="请输入博士学位数量"></t-input> -->
      </t-form-item>
      <t-form-item label="其中：硕士学位" name="jtyskjhdss">
        <t-input-number v-model="formData.jtyskjhdss" theme="column" style="width: 100%" placeholder="请输入硕士学位数量"></t-input-number>
        <!-- <t-input v-model="formData.jtyskjhdss" placeholder="请输入硕士学位数量"></t-input> -->
      </t-form-item>
      <t-form-item label="其中：学士学位" name="jtyskjhdxs">
        <t-input-number v-model="formData.jtyskjhdxs" theme="column" style="width: 100%" placeholder="请输入学士学位数量"></t-input-number>
        <!-- <t-input v-model="formData.jtyskjhdxs" placeholder="请输入学士学位数量"></t-input> -->
      </t-form-item>
      <t-form-item label="其中：高级职称" name="jtyskjhdgj">
        <t-input-number v-model="formData.jtyskjhdgj" theme="column" style="width: 100%" placeholder="请输入高级职称数量"></t-input-number>
        <!-- <t-input v-model="formData.jtyskjhdgj" placeholder="请输入高级职称数量"></t-input> -->
      </t-form-item>
      <t-form-item label="其中：中级职称" name="jtyskjhdzj">
        <t-input-number v-model="formData.jtyskjhdzj" theme="column" style="width: 100%" placeholder="请输入中级职称数量"></t-input-number>
        <!-- <t-input v-model="formData.jtyskjhdzj" placeholder="请输入中级职称数量"></t-input> -->
      </t-form-item>
      <t-form-item label="三、交通运输开发人员数量" name="jtyskf">
        <t-input-number v-model="formData.jtyskf" theme="column" style="width: 100%" placeholder="请输入交通运输开发人员数量"></t-input-number>
        <!-- <t-input v-model="formData.jtyskf" placeholder="请输入交通运输开发人员数量"></t-input> -->
      </t-form-item>
      <t-form-item label="其中：博士学位" name="jtyskfbs">
        <t-input-number v-model="formData.jtyskfbs" theme="column" style="width: 100%" placeholder="请输入博士学位数量"></t-input-number>
        <!-- <t-input v-model="formData.jtyskfbs" placeholder="请输入博士学位数量"></t-input> -->
      </t-form-item>
      <t-form-item label="其中：硕士学位" name="jtyskfss">
        <t-input-number v-model="formData.jtyskfss" theme="column" style="width: 100%" placeholder="请输入硕士学位数量"></t-input-number>
        <!-- <t-input v-model="formData.jtyskfss" placeholder="请输入硕士学位数量"></t-input> -->
      </t-form-item>
      <t-form-item label="其中：学士学位" name="jtyskfxs">
        <t-input-number v-model="formData.jtyskfxs" theme="column" style="width: 100%" placeholder="请输入学士学位数量"></t-input-number>
        <!-- <t-input v-model="formData.jtyskfxs" placeholder="请输入学士学位数量"></t-input> -->
      </t-form-item>
      <t-form-item label="其中：高级职称" name="jtyskfgj">
        <t-input-number v-model="formData.jtyskfgj" theme="column" style="width: 100%" placeholder="请输入高级职称数量"></t-input-number>
        <!-- <t-input v-model="formData.jtyskfgj" placeholder="请输入高级职称数量"></t-input> -->
      </t-form-item>
      <t-form-item label="其中：中级职称" name="jtyskfzj">
        <t-input-number v-model="formData.jtyskfzj" theme="column" style="width: 100%" placeholder="请输入中级职称数量"></t-input-number>
        <!-- <t-input v-model="formData.jtyskfzj" placeholder="请输入中级职称数量"></t-input> -->
      </t-form-item>
      <t-form-item label="审批状态" name="approveStatus">
        <t-switch
          size="large"
          v-model="formData.approveStatus"
          :label="['提交', '暂存']"
          :customValue="['2', '1']"
        ></t-switch>
      </t-form-item>
    </t-form>
  </t-dialog>
</template>

<script>
export const tabKey = 'personInfo'
export const tableColumns = [
  {
    colKey: 'jtyscy',
    title: '一、交通运输从业人员数量',
    children: [
      { colKey: 'jtyscy', title: '总人数' },
      { colKey: 'jtyscyssys', title: '学士及以上学位' },
    ]
  },
  {
    colKey: 'jtyskjhd',
    title: '二、交通运输科技活动人员数量',
    children: [
      { colKey: 'jtyskjhd', title: '总人数' },
      { colKey: 'jtyskjhdbs', title: '博士' },
      { colKey: 'jtyskjhdss', title: '硕士' },
      { colKey: 'jtyskjhdxs', title: '学士' },
      { colKey: 'jtyskjhdgj', title: '高级' },
      { colKey: 'jtyskjhdzj', title: '中级' },
    ]
  },
  {
    colKey: 'jtyskf',
    title: '三、交通运输开发人员数量',
    children: [
      { colKey: 'jtyskf', title: '总人数' },
      { colKey: 'jtyskfbs', title: '博士' },
      { colKey: 'jtyskfss', title: '硕士' },
      { colKey: 'jtyskfxs', title: '学士' },
      { colKey: 'jtyskfgj', title: '高级' },
      { colKey: 'jtyskfzj', title: '中级' },
    ]
  },
  { colKey: 'approveStatus', title: '审批状态', width: '120px', fixed: 'right' },
  { colKey: 'op', title: '操作', fixed: 'right' },
]
export default {
  name: 'TabPersonnelSize',
  props: {
    infoId: {
      type: Number,
      required: true,
      default: -1,
    },
  },
  data() {
    return {
      // business data
      formData: {
        jtyscy: undefined,
        jtyscyssys: undefined,
        jtyskjhd: undefined,
        jtyskjhdbs: undefined,
        jtyskjhdss: undefined,
        jtyskjhdxs: undefined,
        jtyskjhdgj: undefined,
        jtyskjhdzj: undefined,
        jtyskf: undefined,
        jtyskfbs: undefined,
        jtyskfss: undefined,
        jtyskfxs: undefined,
        jtyskfgj: undefined,
        jtyskfzj: undefined,
        approveStatus: '1',
      },
      rules: {
        jtyscy: [{ required: true, message: '交通运输从业人员数量不能为空', trigger: 'blur' },],
        jtyscyssys:[{ required: true, message: '学士及以上学位不能为空', trigger: 'blur' },],
        jtyskjhd: [{ required: true, message: '交通运输科技活动人员数量不能为空', trigger: 'blur' },],
        jtyskjhdbs: [{ required: true, message: '博士学位数量不能为空', trigger: 'blur' },],
        jtyskjhdss: [{ required: true, message: '硕士学位数量不能为空', trigger: 'blur' },],
        jtyskjhdxs: [{ required: true, message: '学士学位数量不能为空', trigger: 'blur' },],
        jtyskjhdgj: [{ required: true, message: '高级职称数量不能为空', trigger: 'blur' },],
        jtyskjhdzj: [{ required: true, message: '中级职称数量不能为空', trigger: 'blur' },],
        jtyskf:[{ required: true, message: '交通运输开发人员数量不能为空', trigger: 'blur' },],
        jtyskfbs: [{ required: true, message: '博士学位数量不能为空', trigger: 'blur' },],
        jtyskfss: [{ required: true, message: '硕士学位数量不能为空', trigger: 'blur' },],
        jtyskfxs: [{ required: true, message: '学士学位数量不能为空', trigger: 'blur' },],
        jtyskfgj: [{ required: true, message: '高级职称数量不能为空', trigger: 'blur' },],
        jtyskfzj: [{ required: true, message: '中级职称数量不能为空', trigger: 'blur' },],
      },
      // base data
      visible: true,
      header: '',
    };
  },
  created() {
    if (this.infoId === -1) {
      this.header = '添加信息记录';
    } else {
      this.header = '修改信息内容';
      this.getDetail();
    }
  },
  methods: {
    async onSubmit() {
      const res = await this.$refs.form.validate();
      if (res) {
        if (this.infoId === -1) {
          const { code } = await this.$api.kjtjdc.table[tabKey].add(this.formData);
          if (code === 200) {
            this.$message.success('添加信息成功');
          }
        } else {
          const { code } = await this.$api.kjtjdc.table[tabKey].edit(this.formData);
          if (code === 200) {
            this.$message.success('修改信息成功');
          }
        }
        this.$emit('update:visible', false);
        this.$emit('reload');
      } else {
        this.$message.warning('请完善信息');
      }
    },
    async getDetail() {
      const { data } = await this.$api.kjtjdc.table[tabKey].getInfoById(this.infoId);
      data.name = Number(data.name);
      this.formData = data;
    },
    // base methods
    closeDialog() {
      this.$refs.form.reset();
      this.$emit('update:visible', false);
    },
  }
}
</script>

<style lang="less" scoped>

</style>
